<template>
  <div class="dataAnalysis tapStyle">
    <div class="toolbox">
      <div class="toolbox-row">
        <span>时间选择 : </span>
        <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>&emsp;&emsp;
        <span>断面编码或名称 : </span>
        <div class="layoutBox" style="width:150px">
          <el-input v-model="sectionName" placeholder="请输入"></el-input>
        </div>&emsp;
        <span>所属行政区 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>所属流域 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
         <el-button @click=""><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="toolbox-row">
        <span>是否验收 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>包&emsp;&emsp;件 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
      </div>
    </div>
    <div class="containerbox">
      <el-table
        :yfdata="tableData"
        height="100%"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="area"
          label="行政区">
        </el-table-column>
        <el-table-column
          prop="basin"
          label="流域">
        </el-table-column>
        <el-table-column
          prop="sectionName"
          label="断面名称">
        </el-table-column>
        <el-table-column
          prop="monitorItem"
          label="监测项目">
        </el-table-column>
        <el-table-column
          prop="answerNum"
          label="应上传数量">
        </el-table-column>
        <el-table-column
          prop="actualNum"
          label="实际上传数量">
        </el-table-column>
        <el-table-column
          prop="rate"
          label="传输率">
        </el-table-column>
        <el-table-column
          prop="effective"
          label="有效数据数量">
        </el-table-column>
        <el-table-column
          prop="effectiveRate"
          label="数据有效率">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "dataAnalysis",
  data() {
    return {
      dateRange: "", //时间选择
      sectionName: "", //断面名称
      value: "",
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      tableData: [{}],
      projectSet: false
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  }
};
</script>

<style scoped lang="less">
.dataAnalysis {
  height: calc(100% - 30px);
  .containerbox {
    padding: 6px 12px;
    height: calc(100% - 68px);
  }
}
.editInput {
  width: 50px;
  border: none;
  outline: none;
}
.toolbox-row {
  margin-bottom: 6px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
